const ProductSkeleton: React.FC = () => {
  return (
    <article className='group border-[1px] border-solid border-[#E8E8E8] hover:border-black transition-colors duration-200'>
      {/* 图片 */}
      <div className='relative w-full aspect-w-[5] aspect-h-[3] lg:aspect-w-[32] lg:aspect-h-[25] skeleton'></div>
      {/* 内容 */}
      <div>
        <div className='p-[0.8125rem] pb-[1.5625rem] lg:p-[0.9375rem] 2xl:p-[1.40625rem] border-b border-b-[#E8E8E8] group-hover:border-b-black'>
          {/* 标题 */}
          <div className='skeleton rounded-[4px] text-[#333333] text-[1rem] leading-[1.4rem] font-bold lg:text-[0.75rem] lg:leading-[1rem] 2xl:text-[1.125rem] 2xl:leading-[1.5rem]'>
            <div className='opacity-0'>1111111111111</div>
          </div>
          <div className='h-1' />
          {/* 简介 */}
          <div className='skeleton rounded-[4px] line-clamp-2 text-[#666666] text-[0.75rem] leading-[1.0625rem] font-medium lg:text-[0.75rem] lg:leading-[0.9rem] 2xl:text-[1.125rem] 2xl:leading-[1.35rem]'>
            <div className='opacity-0'>
              1111111111111111111111111111111111111
            </div>
          </div>
          <div className='h-[0.75rem] lg:h-3 2xl:h-[1.125rem]' />
          {/* 信息列表 */}
          <div className='space-y-3 lg:space-y-2 2xl:space-y-3'>
            <div className='flex justify-between items-center font-medium text-[0.875rem] leading-[0.875rem] lg:text-[0.75rem] lg:leading-[0.9rem] 2xl:text-[1.125rem] 2xl:leading-[1.35rem]'>
              <div className='text-[#999999] skeleton rounded-[4px]'>
                <div className='opacity-0'>11111</div>
              </div>
              <div className='text-[#999999] skeleton rounded-[4px]'>
                <div className='opacity-0'>11111</div>
              </div>
            </div>
            <div className='flex justify-between items-center font-medium text-[0.875rem] leading-[0.875rem] lg:text-[0.75rem] lg:leading-[0.9rem] 2xl:text-[1.125rem] 2xl:leading-[1.35rem]'>
              <div className='text-[#999999] skeleton rounded-[4px]'>
                <div className='opacity-0'>11111</div>
              </div>
              <div className='text-[#999999] skeleton rounded-[4px]'>
                <div className='opacity-0'>11111</div>
              </div>
            </div>
            <div className='flex justify-between items-center font-medium text-[0.875rem] leading-[0.875rem] lg:text-[0.75rem] lg:leading-[0.9rem] 2xl:text-[1.125rem] 2xl:leading-[1.35rem]'>
              <div className='text-[#999999] skeleton rounded-[4px]'>
                <div className='opacity-0'>11111</div>
              </div>
              <div className='text-[#999999] skeleton rounded-[4px]'>
                <div className='opacity-0'>11111</div>
              </div>
            </div>
            <div className='flex justify-between items-center font-medium text-[0.875rem] leading-[0.875rem] lg:text-[0.75rem] lg:leading-[0.9rem] 2xl:text-[1.125rem] 2xl:leading-[1.35rem]'>
              <div className='text-[#999999] skeleton rounded-[4px]'>
                <div className='opacity-0'>11111</div>
              </div>
              <div className='text-[#999999] skeleton rounded-[4px]'>
                <div className='opacity-0'>11111</div>
              </div>
            </div>
            <div className='flex justify-between items-center font-medium text-[0.875rem] leading-[0.875rem] lg:text-[0.75rem] lg:leading-[0.9rem] 2xl:text-[1.125rem] 2xl:leading-[1.35rem]'>
              <div className='text-[#999999] skeleton rounded-[4px]'>
                <div className='opacity-0'>11111</div>
              </div>
              <div className='text-[#999999] skeleton rounded-[4px]'>
                <div className='opacity-0'>11111</div>
              </div>
            </div>
          </div>
        </div>
        <div className='flex justify-center items-center h-[3.625rem] lg:h-[3.125rem] 2xl:h-[4.6875rem] border-b border-b-[#E8E8E8] group-hover:border-b-black'>
          <div className='skeleton rounded-[4px] text-[1rem] leading-[1rem] text-black font-bold lg:text-[1rem] lg:leading-[1rem] 2xl:text-[1.5rem] 2xl:leading-[1.5rem]'>
            <div className='opacity-0'>11111</div>
          </div>
        </div>
        <div className='flex justify-center items-center h-[3.625rem] lg:h-[2.25rem] 2xl:h-[3.375rem] group-hover:bg-black group-hover:text-white'>
          <div className='skeleton rounded-[4px] text-[0.875rem] leading-[1rem] font-medium lg:text-[0.75rem] lg:leading-[1rem] 2xl:text-[1.125rem] 2xl:leading-[1.5rem]'>
            <div className='opacity-0'>11111</div>
          </div>
        </div>
      </div>
    </article>
  )
}

export default ProductSkeleton
